<template>
	<view class="box">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="left" @click="back">返回</view>
			<view class="title">车俩详情</view>
			<view class="right"></view>
		</view>
		<!-- 内容 -->
		<view class="container">
			<view class="image-container">
				<!-- 车俩图片 -->
				<image src="../../static/carImage/u301.png" mode=""></image>
				<view class="tag">
				<u-tag text="使用中" shape="circle"></u-tag>
				</view>
			</view>
			<view class="image-container2">
				<!-- 参数图片 -->
				<view>
					<text>参数描述</text>
					<text>5门/5座 单位mm</text>
				</view>
				<view class="ig">
					<image src="../../static/carImage/u462.png" mode=""></image>
					<!-- <text class="text-on-image">轴距3005</text> -->
				</view>
			</view>
			<view class="gg">
				<!-- 参数配置 -->
				<view>
					<u-grid :border="true">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<text class="grid-bt">{{baseListItem.bt}}</text>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<view class="tj">
				<!-- 推荐 -->
				<text class="tj-text">推荐租聘</text>
				<view class="two">
					<view>
						<image src="../../static/carImage/u305.png"></image>
						<text>蔚来E8</text>
					</view>
					<view>
						<image src="../../static/carImage/u305.png"></image>
						<text>蔚来</text>
					</view>
				</view>
			</view>
			<view class="zz-bt">
				<!-- 使用按钮 -->
				<button size="default">申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
						bt: '动力类型',
						title: '图片'
					},
					{
						bt: '续航',
						title: '锁头'
					},
					{
						bt: '当前电量',
						title: '星星'
					},
					{
						bt: '电池类型',
						title: '图片'
					},
					{
						bt: '快充/满充',
						title: '锁头'
					},
					{
						bt: '车辆购买时间',
						title: '星星'
					},
				]
			}
		},
		methods: {
			back() {
				uni.navigateBack(); // 返回上一页
			}
		},
		onShow() {
			// 设置导航栏颜色
			uni.setNavigationBarColor({
				frontColor: '#000000', // 导航栏前景颜色，仅支持 #ffffff 和 #000000
				backgroundColor: 'rgb(233, 253, 251)', // 导航栏背景颜色
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		height: 960px;
	}
	.custom-navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		/* 导航栏高度 */
		background-color: rgb(233, 253, 251);
		/* 导航栏背景颜色 */
		font-weight: bold;
		font-size: 15px;
		color: #000000;
		/* 导航栏文字颜色 */
		padding: 0 10px;
		/* 内边距 */
	}

	.container {
		background: linear-gradient(to bottom, rgb(233, 253, 251), rgb(255, 255, 255));
		/* 从上到下的渐变 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.tag{
			width:70px;
			margin:0 auto;
			height: 22px;
			display: flex;
		}

		.image-container {
			margin: 0 auto;
			width: 350px;
			/* 设置容器的宽度 */
			height: 250px;
			/* 设置容器的高度 */
			overflow: hidden;

			/* 隐藏超出容器的部分 */
			image {
				width: 100%;
				/* 让图片宽度填满容器 */
				height: 210px;
				/* 让图片高度填满容器 */
				object-fit: cover;
				/* 保持图片的宽高比，填满容器 */
				transform: scale(1.2);
				/* 放大图片 */
				transform-origin: center;
				/* 设置放大中心 */
			}
		}

		.image-container2 {

			width: 100%;
			display: flex;
			flex-direction: column;

			view:nth-child(1) {
				display: flex;
				justify-content: space-between;

				text:nth-child(1) {
					margin-left: 20px;
					font-weight: bold;
					font-size: 15px;
				}

				text:nth-child(2) {
					font-size: 13px;
					color: rgb(194, 194, 204);
					margin-right: 20px;
				}
			}

			.ig {
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;

				image {
					width: 100%;
					height: 150px;
				}
			}
		}

		.gg {
			width: 100%;
			margin-top: 30px;

			.grid-bt {
				font-size: 13px;
				color: gray;
			}

			.grid-text {
				width: 100%;
				height: 60px;
				font-weight: 600;
				text-align: center;
				font-size: 14px;
				color: black;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}

		.tj {
			margin-top: 30px;
			width: 100%;
			height: auto;

			.tj-text {
				margin-left: 20px;
				font-size: 15px;
				font-weight: bold;
			}

			.two {
				width: 400px;
				display: flex;
				overflow: hidden;
				justify-content: space-evenly;

				image {
					width: 150px;
					height: 100px;
					transform: scale(1.1);
				}

				text {
					display: block;
					text-align: center;
					font-weight: bold;
					font-size: 15px;
				}
			}
		}

		.zz-bt {
			margin-top: 20px;

			button {
				width: 400px;
				background-color: rgb(47, 76, 93C);
				color: white;
			}
		}
	}
</style>